<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Web Socket Chat Client Example</title>
        <meta charset="UTF-8">
        <link href="chat_client.css" rel="stylesheet" type="text/css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="wsap_client.js" type="text/javascript"></script>
        <script type="text/javascript">
        // Connect to web socket server
        wsap = new wsap_client("ws://192.168.56.101:9876/", {
            onClose: function(e) {
                console.log("Connection Closed");
                chat.disconnected();
            },
            onFailed: function(ws) {
                console.log("Connection Failed");
            },
            onOpen: function(e) {
                console.log("Connection Opened");
                chat.connected();
            },
            onReceive: function(response) {
                console.log(response);
                chat._router(response);
            },
        });
        /**
         * Chat Client
         **/
        chat = {
            loggedOn: false,
            _router: function(response) {
                if (response.task == "logged_on") {
                    chat.logOnSuccess(response.values.nickname);
                }
                if (chat.loggedOn) {
                    if (response.task == "get_own_msg") {
                        chat.newMsg("--"+chat.nickname, response.values.msg, true);
                    }
                    else if (response.task == "get_others_msg") {
                        chat.newMsg(response.values.nickname, response.values.msg, false);
                    }
                    else if (response.task == "new_user") {
                        chat.newUser(response.values.nickname);
                    }
                }
            },
            connected: function() {
                $("#disconnected-status").hide();
                $("#log-on-box").show();
            },
            disconnected: function() {
                chat.loggedOn = false;
                chat.nickname = '';
                chat.serverNotice("Disconnected");
                $("#log-on-box").hide();
                $("#disconnected-status").show();
            },
            logOn: function() {
                $("#cmd-log-on, #nickname-input").attr("disabled", "disabled");
                var nickname = $("#nickname-input").val();
                if (nickname.length < 3) {
                    alert("You must use a nick name with at least 3 characters.");
                    $("#cmd-log-on, #nickname-input").removeAttr("disabled");
                } else {
                    wsap.send('{"task":"log_on","nickname":"'+nickname+'"}');
                    chat.nickname = nickname;
                }
            },
            logOnSuccess: function(nickname) {
                chat.loggedOn = true;
                chat.nickname = nickname;
                chat.serverNotice("Connected");
                $("#log-on-box").hide();
                $("#chat-box").show();
                $("#chat-input").focus();
            },
            newMsg: function(nickname, msg, isSelf) {
                if (isSelf != true) {
                    $("#chat-content").append('<dt>'+nickname+':</dt><dd>'+msg+"</dd>");
                } else {
                    $("#chat-content").append('<dt class="local">'+nickname+':</dt><dd>'+msg+"</dd>");
                }
            },
            newUser: function(nickname) {
                chat.serverNotice(nickname + " has connected");
            },
            sendMsg: function() {
                var msg = $("#chat-input").val();
                $("#chat-input").val('');
                if (msg.length > 0) {
                    wsap.send('{"task":"send_msg","msg":"'+msg+'"}');
                    $("#chat-input").focus();
                }
            },
            serverNotice: function(notice) {
                $("#chat-content").append('<dt class="server-notice">Server Notice:</dt><dd> -- '+notice+' --</dd>');
            }
        }
        $(document).ready(function() {
            // Bind me some buttons booooy!
            $('#cmd-log-on').bind('click',function(e){
                chat.logOn();
            });
            $('#cmd-chat-send').bind('click',function(e){
                chat.sendMsg();
            });
            $('#chat-input').keydown(function (e) {
                var keyCode = e.keyCode || e.which;
                // Catch the enter key and send message
                if (keyCode == 13) {
                    chat.sendMsg();
                    return false;
                }
            });
            $('#nickname-input').keydown(function (e) {
                var keyCode = e.keyCode || e.which;
                // Catch the enter key and send message
                if (keyCode == 13) {
                    chat.logOn();
                    return false;
                }
            });
        });
        </script>
    </head>
    <body>
        <div id="chat-app">
            <div id="disconnected-status">Disconnected from server.</div>
            <div id="log-on-box" style="display: none;">
                <label for="nickname">Nickname:</label>
                <input type="text" id="nickname-input"/>
                <button id="cmd-log-on">Log On</button>
            </div>
            <dl id="chat-content"></dl>
            <div id="chat-box" style="display: none;">
                <input type="text" id="chat-input"/>
                <button id="cmd-chat-send">Send</button>
            </div>
        </div>
    </body>
</html>
